<template>
  <div class="root">
    <MyHeader title="tabbar 案例" bgColor="blue"></MyHeader>
    <!-- <MyGoodsList></MyGoodsList> -->
    <component :is="curComp"></component>
    <MyTabBar @sendData="changeComp" :arr="tabList"></MyTabBar>
  </div>
</template>

<script>
import MyHeader from "@/components/MyHeader"
import MyTabBar from "@/components/MyTabBar"
import MyGoodsList from "@/views/MyGoodsList"
import MyGoodsSearch from "@/views/MyGoodsSearch"
import MyUserInfo from "@/views/MyUserInfo"
export default {
  data(){
    return {
      curComp: "MyGoodsList",
      tabList: [
        {
            iconText: "icon-shangpinliebiao",
            text: "商品列表",
            componentName: "MyGoodsList"
        },
        {
            iconText: "icon-sousuo",
            text: "商品搜索",
            componentName: "MyGoodsSearch"
        },
        {
            iconText: "icon-user",
            text: "我的信息",
            componentName: "MyUserInfo"
        }
    ]
    }
  },
  components: {
    MyHeader,MyTabBar,MyGoodsList,MyGoodsSearch,MyUserInfo
  },
  methods: {
    changeComp(name){
      // console.log(44,name);
      this.curComp = name;
    }
  }
}
</script>

<style lang="less" scoped>
.root{
  padding-top: 45px;
}
</style>